

.userNav{width: 100%;height: 45px;border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;
}
.userNav>div:nth-child(1){width: 120px;height: 25px;display: flex;margin-left: 35px;align-content: center;
}
.userNav>div:nth-child(1) img{width: 25px;height: 25px;
}
.userNav>div:nth-child(1) div{line-height: 25px;margin-left: 5px;padding: 0;color: #333;font-size: 14px;
}
.userNavT{width: 220px;display: flex;align-items: center;
}
.userNavT>div:nth-child(1){display: flex;
}
.userNavT>div:nth-child(1) img{width: 20px;height: 20px;margin-top: 3px;
}
.userNavT>div:nth-child(1) div{line-height: 25px;margin-left: 5px;padding: 0;color: #333;font-size: 14px;
}
.userNavT>div:nth-child(2){color: #888;font-size: 14px;cursor: pointer;
}
.user{position: relative;}
.userDetails {margin-top: 20px;width: 100%;min-height: 500px;display: flex;justify-content: center;
}
.datails {border: 1px solid #efefef;border-top: 2px solid #3c8dbc;width: 95%;background-color: #fff;border-radius: 5px;box-shadow: 1px 0 3px #eff2f7;
}
.datails>ul>li {display: flex;height: 45px;line-height: 45px;text-align: center;
}
.detaLi {border-bottom: 1px solid #ddd;font-size: 14px;color: #000;
}
.firstLi {border-bottom: 1px solid #8492a6;font-weight: 600;color: #000;background-color: rgb(245, 245, 245);
}
.detaLi>div:nth-child(1) {display: flex;align-items: center;justify-content: center;
}
.detaLi>div:nth-child(1) img {width: 35px;height: 35px;border: 1px solid #99a9bf;border-radius: 3px;
}
.detaLi:hover {background-color: rgb(245, 245, 245);
}
.datails>ul>li>div {border-left: 1px solid #ddd;
}
.datails>ul>li>div:nth-child(1) {width: 10%;
}
.datails>ul>li>div:nth-child(2) {width: 30%;
}
.datails>ul>li>div:nth-child(3) {width: 10%;
}
.datails>ul>li>div:nth-child(4) {width: 15%;
}
.datails>ul>li>div:nth-child(5) {width: 20%;
}
.datails>ul>li>div:nth-child(6) small{border: 1px solid #ddd;padding: 5px;border-radius: 3px;color: #666;font-size: 14px;cursor:pointer;
}
.datails>ul>li>div:nth-child(6) small span{font-size: 12px;margin-right: 3px;}
.datails>ul>li>div:nth-child(6){border-right: 1px solid #ddd;width: 15%;min-width: 100px;
}
.datails>ul .lastLi {display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #8492a6;height: 55px;
}
.datails>ul .lastLi>div{border: 0;
}
.lastLi .lastSel {width: 530px;height: 35px;margin-top: 2px; margin-left:105px;
}
.lastLi .lastPag {width: 50px;height: 35px;margin-top: 5px;
}
.datails>ul .nullLi>div:nth-child(1){width: 100%;}

/*详情弹出框*/
  .detailsPopup {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);
    }

    .detailMain {width: 600px;height: 420px;background-color: #fff;border: 1px solid #8492a6;border-radius: 7px;margin: calc((100vh - 560px) / 2) auto;box-shadow: 0 -3px 3px #8492a6;
    }

    .detailMain .addPone>div:nth-child(2) {font-size: 16px;color: #000;padding-left: 15px;
    }

    .detailMain .addPone {border: 0;margin: 0;height: 45px;
    }

    .detailMain .addPone>div:nth-child(1) {line-height: 45px;
    }

    .detailMain .addAtlas {height: 100px;
    }

    .detailMain .addAtlas>ul {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
    }

    .detailMain .addAtlas>ul>li {width: 80px;height: 80px;border: 1px solid #99a9bf;border-radius: 5px;margin-left: 7px;margin-right: 7px;float: left;overflow: hidden;
    }

    .detailMain .addAtlas>ul>li img {width: 100%;height: 100%;
    }

     .popupTitle {height: 70px;position: relative;top: 0;left: 0;
    }

    .popupTitle h2 {width: 100%;height: 70px;line-height: 70px;text-align: center;color: #324057;margin: 0;padding: 0;
    }

    .popupTitle>div {position: absolute;top: 15px;right: 15px;width: 16px;height: 17px;cursor: pointer;
    }

    .popupTitle>div>img {width: 100%;height: 100%;margin: 0;padding: 0;
    }
    .addPone {height: 55px;display: flex;margin-top: 10px;
    }

    .addPone>div:nth-child(1) {width: 190px;height: 55px;line-height: 55px;text-align: center;font-size: 15px;color: #000;
    }

    .addPone>div:nth-child(2) {display: flex;align-items: center;
    }
    .addPonImg{position: relative;}
    .headImgSm{cursor: pointer;}
    .detailMain>div:nth-child(2)>div:nth-child(2){margin: 0;padding: 0;border: 1px solid #ccc;width: 45px;height: 45px;border-radius: 5px;overflow: hidden;margin-left: 15px;}
    .headImgBg{position: absolute;top: -10px;left: 255px;width: 180px;height: 180px;border-radius: 5px;overflow: hidden;border: 1px solid #ccc;display: none;}
    .detailMain>div:nth-child(2)>div:nth-child(2):hover + #headImgS{display: block;}
    .headImgBg img{
        width: 100%;
        height: 100%;
    }
    .detailMain>div:nth-child(2)>div:nth-child(2) img{
    width: 100%;height: 100%;
    }
    .addPone>div:nth-child(2) input {width: 330px;height: 35px;line-height: 35px;padding-left: 5px;font-size: 14px;border-radius: 3px;border: 1px solid #d3dce6;
    }

    .addPone>div:nth-child(1) small {color: red;margin-right: 5px;font-size: 14px;
    }
    .addOper {margin-top: 10px;height: 60px;display: flex;justify-content:flex-end;align-items: center;border-top: 1px solid #ccc;
    }

    .addOper>button {width: 80px;height: 35px;color: #fff;font-size: 15px;border-radius: 3px;border: 1px solid #f9fafc;
    }

    .addOper>button:nth-child(1) {background-color: #20a0ff;margin-right: 20px;
    }
    .addOper>button:nth-child(2) {
        background-color: #ff4949;margin-right: 40px;
    }
    .slide-fade-enter,
    .slide-fade-leave-active {transform: translateY(-30px);opacity: 0;
    }
    .showdeta {display: none;
    }
    .slide-fade-enter-active {transition: all 0.7s ease;
    }